<template>
  <div class="range-box">
    <template v-if="type === 'input_slide'">
      <el-input-number
        v-model="curRangeSize"
        class="slider-number"
        :min="min"
        :max="max"
        :controls="false"
        size="default"
        :step="step"
      ></el-input-number>
      <el-button
        type="primary"
        class="slider-number-left"
        @click="handleRangeSize('reduce')"
        link
      >
        <el-icon>
          <Remove />
        </el-icon>
      </el-button>
      <el-slider
        v-model="curRangeSize"
        :min="min"
        :max="max"
      ></el-slider>
      <el-button
        type="primary"
        class="slider-number-right"
        @click="handleRangeSize('add')"
        link
      >
        <el-icon>
          <CirclePlus />
        </el-icon>
      </el-button>
    </template>
    <template v-if="type === 'input'">
      <el-input-number
        v-model="curRangeSize"
        class="input-number"
        :disabled="disabled"
        :min="min"
        :max="max"
        size="default"
        :step="step"
        :stepStrictly="stepStrictly"
        :controls-position="controlsPosition"
      ></el-input-number>
      <span
        v-if="tip"
        class="fix-flex"
      >&nbsp;</span>
      <el-tooltip
        v-if="tip"
        class="item"
        :content="tip"
        placement="top-start"
      >
        <el-button
          type="primary"
          :style="{ marginLeft: '5px' }"
          link
        >
          <el-icon>
            <InfoFilled />
          </el-icon>
        </el-button>
      </el-tooltip>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  type: {
    type: String,
    default: 'input_slide', // input_slide: 输入框+滑动条， input: 输入框
  },
  value: {
    type: Number,
    default: 0,
  },
  min: {
    type: Number,
    default: -100000000,
  },
  max: {
    type: Number,
    default: 100000000,
  },
  tip: {
    type: String,
    default: '',
  },
  step: {
    type: Number,
    default: 1,
  },

  // 数值输入框是否只能输入 step 的倍数
  stepStrictly: {
    type: Boolean,
    default: false,
  },
  controlsPosition: {
    type: String,
    default: '', // right, left
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['update:value']);

const curRangeSize = ref(props.value);

watch(() => props.value, (newVal) => {
  curRangeSize.value = newVal
})

watch(curRangeSize, (newVal) => {
  emit('update:value', newVal)
})

function handleRangeSize(type: string) {
  if (type === 'add') {
    curRangeSize.value++
  } else {
    curRangeSize.value--
  }
}
</script>
<style lang="less" scoped>
.range-box {
  display: flex;
  align-items: center;
  width: 100%;
  :deep(.slider-number) {
    width: 28px;
    margin-right: 5px;
    .el-input__wrapper{
      padding-left: 0;
      padding-right: 0;
    }
  }
  .slider-number-left {
    margin-right: 10px;
  }
  .slider-number-right {
    margin-left: 10px;
  }
  .el-slider {
    width: 110px;
  }
  .input-number {
    width: 100%;
  }
  :deep(.el-input-number.is-controls-right) {
    .el-input__wrapper{
      padding-left: 0;
      padding-right: 27px;
      .el-input__inner {
        padding-left: 0px;
        padding-right: 0px;
      }
    }
  }
}
</style>
